<template>
    <div class="gongyi">
        <!--        新增-->
        <div>
            <el-button type="text" @click="form1.dialogFormVisible1 = true" style="color: black; margin-left: 5% ;font-size: 1em;">新增文章</el-button>
            <br>
            <div style="border: 2px"></div>
            <el-dialog title="新增文章" :visible.sync="form1.dialogFormVisible1">
                <el-form :model="form1">
                    <el-form-item label="头像" :label-width="form1.formLabelWidth1">
                        <el-button type="primary" @click="form1.dialogFormVisible2 = true">添加图片</el-button>
                    </el-form-item>
                    <el-form-item label="类别" :label-width="form1.formLabelWidth1">
                        <select v-model="form1.category_name" >
                            <option value="教育">教育</option>
                            <option value="科幻">科幻</option>
                            <option value="医学">医学</option>
                        </select>
                    </el-form-item>
                    <el-form-item label="标题" :label-width="form1.formLabelWidth1">
                        <el-input v-model="form1.article_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" :label-width="form1.formLabelWidth1">
                        <el-input v-model="form1.article_intro" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="form1.dialogFormVisible1 = false" style="height: 40px;">取消</el-button>
                    <el-button style="height: 40px;" @click="queDingXinZeng">确定新增</el-button>
                </div>
            </el-dialog>
            <el-dialog title="上传图片" :visible.sync="form1.dialogFormVisible2">
                <el-upload
                        class="upload-demo"
                        action="http://localhost:8081/file/upload"
                        enctype="multipart/form-data"
                        name="file"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="form1.dialogFormVisible2 = false">放弃上传</el-button>
                    <el-button type="primary" @click="queDingShangChuan">确定上传</el-button>
                </div>
            </el-dialog>

        </div>
        <!--        搜索-->
        <div>
            <el-button type="text" @click="sousuo" style="color: black; margin-left: 5% ;font-size: 1em">搜索文章</el-button>
            <span style="margin-left: 4%">id：</span>
            <input type="text" v-model="ss.id" placeholder="请输入id">
            <span style="margin-left: 4%">标题：</span>
            <input type="text" v-model="ss.articleName" placeholder="请输入标题">
            <span style="margin-left: 4%">内容：</span>
            <input type="text" v-model="ss.articleIntro" placeholder="请输入内容">
            <span style="margin-left: 4%">类别：</span>
            <select v-model="ss.category_name">
                <option value="教育">教育</option>
                <option value="科幻">科幻</option>
                <option value="医学">医学</option>
                <option value="">全部</option>
            </select>
        </div>
        <!--        主体、删除、修改-->
        <div>
            <el-table
                    :data="list"
                    border
                    style="width: 90%;margin-left: 5%"
                    :header-cell-style="{'background-color': '#409EFF', color:'#fff'}">
                <el-table-column
                        fixed
                        prop="id"
                        label="id"
                        width="80%">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="category_name"
                        label="类别"
                        width="80%">
                </el-table-column>
                <el-table-column
                        prop="img_path"
                        label="头像"
                        width="160%">
                    <template slot-scope="scope">
                        <span v-html="showImage(scope.row)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="article_name"
                        label="标题"
                        width="240%">
                </el-table-column>
                <el-table-column
                        prop="article_intro"
                        label="内容"
                        width="400%">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120%">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="shanChu(scope.row)">删除</el-button>
                        <el-button type="text" size="small" @click="xiuGai(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="修改" :visible.sync="form.dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="头像" :label-width="form.formLabelWidth">
                        <el-input v-model="form.img_path" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类别" :label-width="form.formLabelWidth">
                        <select v-model="form.category_name" >
                            <option value="教育">教育</option>
                            <option value="科幻">科幻</option>
                            <option value="医学">医学</option>
                            <option value="">全部</option>
                        </select>
                    </el-form-item>
                    <el-form-item label="标题" :label-width="form.formLabelWidth">
                        <el-input v-model="form.article_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" :label-width="form.formLabelWidth">
                        <el-input v-model="form.article_intro" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button style="height: 40px;" @click="form.dialogFormVisible = false">取消</el-button>
                    <el-button style="height: 40px;" @click="queDingXiuGai">确定修改</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "wenzhang",
        data:function () {
            return{
                list:[],
                fileList:[],

                //表单-修改
                form: {
                    id:'',
                    article_name:'',
                    article_intro:'',
                    img_path:'',
                    category_name:'',
                    formLabelWidth: '120px',
                    dialogFormVisible:false
                },

                //表单-新增
                form1:{
                    article_name:'',
                    article_intro:'',
                    category_name:'',
                    path:'',
                    formLabelWidth1: '120px',
                    dialogFormVisible1:false,
                    dialogFormVisible2:false
                },

                //数组-搜索
                ss:{
                    id:'',
                    articleName:'',
                    articleIntro:'',
                    category_name:''
                }
            }
        },
        created() {
            this.sousuo();
        },
        methods:{
            showImage(row){
                return `<img src="${row.img_path}" style="width: 100%;">`;
            },

            shanChu(row){
                this.axios.request("/article/shanChuArticleMessage", {
                    params: {
                        id:row.id
                    }
                }).then((res) => {
                    console.log(res)
                    location.reload()
                }).catch((err) => {

                })
            },

            xiuGai(row){
                this.form.dialogFormVisible = true;
                this.form.id= row.id;
                this.form.article_name= row.article_name;
                this.form.article_intro= row.article_intro;
                this.form.img_path= row.img_path;
                this.form.category_name= row.category_name;
            },

            queDingXiuGai(){
                this.axios.post("/article/xiuGaiArticleMessage", {
                    id:this.form.id,
                    article_name:this.form.article_name,
                    article_intro:this.form.article_intro,
                    img_path:this.form.img_path,
                    category_name:this.form.category_name,
                }).then((res) => {
                    console.log(res)
                    location.reload()
                }).catch((err) => {

                });
            },

            queDingXinZeng(){
              console.log(this.form1.path)
                this.axios.post("/article/xinZengArticleMessage", {
                    article_name:this.form1.article_name,
                    article_intro:this.form1.article_intro,
                    category_name:this.form1.category_name,
                    img_path:this.form1.path
                }).then((res) => {
                    console.log(res)
                    location.reload()
                }).catch((err) => {

                });
            },

            sousuo(){
                this.axios.post("/article/souSuoArticleMessage", this.ss).then((res) => {
                    console.log(res)
                    this.list = res.data.data
                }).catch((err) => {

                });
            },

            queDingShangChuan(){
                this.form1.dialogFormVisible2 = false;
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
                this.path='';
            },
            handlePreview(file) {
                console.log(file);
            },
            handleSuccess(response) {
              console.log(response);
              this.form1.path=response;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
        }
    }
</script>

<style scoped>

</style>